import 'package:flutter/material.dart';
import 'package:flutter_chat/common/constant/constants.dart';
import 'package:flutter_chat/common/utils/utils.dart';
import 'package:flutter_chat/common/widget/widgets.dart';
import 'package:gap/gap.dart';
import 'package:get/get.dart';

import '../../common/style/theme.dart';
import 'logic.dart';

class RegisterPage extends CustomGetView<RegisterLogic> {
  const RegisterPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Container(
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage(
                "assets/images/elaborated-time@1000x1000px.jpg",
              ),
              fit: BoxFit.cover,
            ),
          ),
          height: Get.height,
          padding: const EdgeInsets.all(20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                alignment: Alignment.center,
                child: const Text(
                  "即时聊天APP",
                  style: TextStyle(
                    fontSize: 30,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              const Gap(AppTheme.largeSpace),
              Card(
                clipBehavior: Clip.antiAlias,
                shape: const RoundedRectangleBorder(
                  side: BorderSide.none,
                  borderRadius: BorderRadius.all(
                    Radius.circular(20),
                  ),
                ),
                child: Form(
                  key: logic.formKey,
                  child: Container(
                    color: Colors.transparent,
                    clipBehavior: Clip.none,
                    padding: const EdgeInsets.all(20),
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Container(
                          alignment: Alignment.center,
                          child: const Text(
                            "账号注册",
                            style: TextStyle(
                              fontSize: 20,
                            ),
                          ),
                        ),
                        const Gap(20),
                        _buildUsername(),
                        const Gap(AppTheme.largeSpace * 2),
                        _buildPassword(),
                        const Gap(AppTheme.largeSpace * 2),
                        _buildConfirmPassword(),
                        const Gap(AppTheme.largeSpace * 2),
                        _buildLogin(),
                        const Gap(AppTheme.largeSpace * 2),
                        _buildMore(),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  /// 构建忘记密码和注册账号
  Row _buildMore() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        SizedBox(
          height: 40,
          child: TextButton(
            onPressed: () {
              Get.offNamed(RouterName.register);
            },
            child: const Text("忘记密码"),
          ),
        ),
        SizedBox(
          height: 40,
          child: TextButton(
            onPressed: () {
              Get.offNamed(RouterName.login);
            },
            child: const Text("账号登录"),
          ),
        ),
      ],
    );
  }

  /// 构建登录按钮
  Widget _buildLogin() {
    return SizedBox(
      width: double.infinity,
      height: 40,
      child: ElevatedButton(
        onPressed: logic.onRegister,
        child: const Text('注册'),
      ),
    );
  }

  /// 构建账号输入框
  Widget _buildUsername() {
    return CustomFormInput(
      autovalidateMode: AutovalidateMode.onUserInteraction,
      prefixIcon: Icons.person,
      bgColor: const Color(0xffF5F7FB),
      hintText: "请输入登录账号",
      validator: (v) {
        if (StringUtil.isEmpty(v)) {
          return "请填写登录账号";
        }
        return null;
      },
      onChanged: (value) {
        logic.updateLoginData("username", value);
      },
    );
  }

  /// 构建密码输入框
  Widget _buildPassword() {
    return CustomFormInput(
      autovalidateMode: AutovalidateMode.onUserInteraction,
      prefixIcon: Icons.lock,
      bgColor: const Color(0xffF5F7FB),
      hintText: "请输入登录密码",
      obscureText: true,
      validator: (v) {
        if (StringUtil.isEmpty(v)) {
          return "请填写登录密码";
        }
        return null;
      },
      onChanged: (value) {
        logic.updateLoginData("password", value);
      },
    );
  }

  /// 构建确认密码输入框
  Widget _buildConfirmPassword() {
    return CustomFormInput(
      autovalidateMode: AutovalidateMode.onUserInteraction,
      prefixIcon: Icons.lock,
      bgColor: const Color(0xffF5F7FB),
      hintText: "请确认输入的登录密码",
      obscureText: true,
      validator: (v) {
        if (StringUtil.isEmpty(v)) {
          return "请填写登录密码";
        }
        if (v != logic.state.registerData.password) {
          return "两次输入的密码不一致";
        }
        return null;
      },
      onChanged: (value) {
        logic.updateLoginData("confirmPassword", value);
      },
    );
  }
}
